import React, { Component } from "react";
import "./Like.scss";
import { NavBar } from "antd-mobile";
import { getLikeData, deleteLikeData } from "../../data/lbqapi";
import { imgURL as baseImgPath } from "../../baseURL/baseURL";
class Like extends Component {
  handleLeft = (params) => {
    // console.log(this.props)
    this.props.history.push("my");
  };
  handleOneNavBar = (e) => {
    // console.log(e.target.innerText)
    if (e.target.innerText === "管理") {
      // console.log(1)
      this.setState({
        is_select: "manage",
      });
    }
  };
  handleTwoNavBar = (e) => {
    if (e.target.innerText === "完成") {
      // console.log(1)
      this.setState({
        is_select: "favorite",
      });
    }
  };
  handleRadio = (likeTwoData, index) => {
    // console.log(likeTwoData);
    // console.log(index);
    var iconChange = document.getElementById("iconChange" + index);
    // console.log(iconChange.className)
    if (iconChange.className === "iconfont icon-xuanzhongyuandian") {
      iconChange.setAttribute("class", "iconfont icon-xuanzhong");
      let newrequestData = JSON.parse(JSON.stringify(this.requestData));
      newrequestData.push(likeTwoData.id);
      // console.log(newrequestData)
      this.requestData = newrequestData;
      // console.log(this.requestData);
    } else {
      iconChange.setAttribute("class", "iconfont icon-xuanzhongyuandian");
      let newrequestData = JSON.parse(JSON.stringify(this.requestData));
      newrequestData.pop();
      this.requestData = newrequestData;
    }
  };
  handleQuanxuan = (params) => {
    var quanxuan = document.getElementById("quanxuan");
    if (quanxuan.className === "iconfont icon-xuanzhongyuandian") {
      quanxuan.setAttribute("class", "iconfont icon-xuanzhong");
      this.setState({
        is_quanxuan: "yesClick",
      });
    } else {
      quanxuan.setAttribute("class", "iconfont icon-xuanzhongyuandian");
      this.setState({
        is_quanxuan: "noClick",
      });
    }
    // this.handleRadio()
  };
  handleDelete = async (params) => {
    // console.log(this.requestData);
    await deleteLikeData(this.requestData);
    let res_likeData = await getLikeData();
    // console.log(res_likeData.data);
    this.setState({
      likeData: res_likeData.data,
    });
  };
  // "iconfont icon-xuanzhongyuandian":"iconfont icon-xuanzhong"
  requestData = [];
  state = {
    likeData: [], //喜欢的数据
    is_quanxuan: "noClick",
    is_select: "favorite", //favorite  manage
    // requestData: [],
  };
  async componentDidMount() {
    let res_likeData = await getLikeData();
    // console.log(res_likeData.data);
    this.setState({
      likeData: res_likeData.data,
    });
  }
  handleItem = (goods_id) => {
    // console.log(goods_id)
    // console.log(this.props)
    this.props.history.push("goodsDetail?"+goods_id)
  }
  handleRecommendItem = (goods_id) => {
    // console.log(goods_id,this.props)
    this.props.history.push("goodsDetail?"+goods_id)
  }
  render() {
    return (
      <div className="appLike">
        <div
          className={
            this.state.is_select === "favorite" ? "appLikeOne" : "hidden"
          }
        >
          <div className="appLikeOneNavBar" onClick={this.handleOneNavBar}>
            <NavBar
              mode="light"
              leftContent={"< 返回"}
              rightContent={"管理"}
              onLeftClick={this.handleLeft}
            >
              喜欢的商品
            </NavBar>
          </div>
          <div className="appLikeOneContent">
            {this.state.likeData &&
              this.state.likeData.map((v) => {
                return (
                  <div className="oneContentItem" key={v.id} onClick={this.handleItem.bind(this,v.goods.id)}>
                    <div className="itemLeft">
                      <img src={baseImgPath + v.goods.pic} alt="" />
                    </div>
                    <div className="itemRight">
                      <div className="itemRightTop">
                        <p className="itemRightTopName">{v.goods.name}</p>
                        <p className="itemRightTopDescript">
                          {v.goods.descript}
                        </p>
                      </div>
                      <div className="itemRightBottom">
                        <p className="itemRightBottomPrice">
                          ￥<span>{v.goods.price / 100}</span>.00
                        </p>
                        <p className="itemRightBottomStock">x{v.goods.stock}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
          </div>
        </div>
        <div
          className={
            this.state.is_select === "manage" ? "appLikeTwo" : "hidden"
          }
        >
          <div className="likeContent">
            <div className="appLikeTwoNavBar" onClick={this.handleTwoNavBar}>
              <NavBar
                mode="light"
                leftContent={"< 返回"}
                rightContent={"完成"}
                onLeftClick={this.handleLeft}
              >
                喜欢的商品
              </NavBar>
            </div>
            <div className="appLikeTwoContent">
              {this.state.likeData &&
                this.state.likeData.map((v, index) => {
                  // console.log(v)
                  return (
                    <div className="twoContentItem" key={v.id}>
                      <div
                        className="itemLeft"
                        onClick={this.handleRadio.bind(this, v, index)}
                      >
                        <span
                          id={"iconChange" + index}
                          className={
                            this.state.is_quanxuan === "noClick"
                              ? "iconfont icon-xuanzhongyuandian"
                              : "iconfont icon-xuanzhong"
                          }
                        ></span>
                      </div>
                      <div className="itemMiddle"  onClick={this.handleRecommendItem.bind(this,v.goods.id)}>
                        <img src={baseImgPath + v.goods.pic} alt="" />
                      </div>
                      <div className="itemRight"  onClick={this.handleRecommendItem.bind(this,v.goods.id)}>
                        <div className="itemRightTop">
                          <p className="itemRightTopName">{v.goods.name}</p>
                          <p className="itemRightTopDescript">
                            {v.goods.descript}
                          </p>
                        </div>
                        <div className="itemRightBottom">
                          <p className="itemRightBottomPrice">
                            ￥<span>{v.goods.price / 100}</span>.00
                          </p>
                          <p className="itemRightBottomStock">
                            x{v.goods.stock}
                          </p>
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
          <div className="likeBottom">
            <div className="likeBottomLeft" onClick={this.handleQuanxuan}>
              <span
                id="quanxuan"
                className="iconfont icon-xuanzhongyuandian"
              ></span>
              全选
            </div>
            <div className="likeBottomRight" onClick={this.handleDelete}>
              删除
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Like;
